<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./字体图标/iconfont.css">
    <link rel="stylesheet" href="./下箭头/iconfont.css">
    <link rel="stylesheet" href="./style/微博评论.css">
</head>

<body>
    <!-- 编辑添加部分 -->
    <div class="compile">
        <textarea name="" placeholder="有什么新鲜事分享给大家?" class="compile-text" id="compile-text" cols="30"
            rows="10"></textarea>
        <ul class="compile-about">
            <li class="iconfont icon-smiling"></li>
            <li class="iconfont icon-image"></li>
            <li class="iconfont icon-at"></li>
            <li class="iconfont icon-jinghao"></li>
            <li class="iconfont icon-shipin"></li>
            <li class="iconfont icon-shandian"></li>
            <li class="iconfont icon-gengduo"></li>
        </ul>
        <div class="compile-send">
            <span class="font-num">0</span>
            <span>公开</span>
            <button class="send">发布</button>
        </div>
    </div>

    <ul class="container-list">
        <li class="list">
            <div class="container">
                <div class="container-left">
                    <img src="./img/icon.jpg" alt="">
                </div>
                <ul class="container-right">
                    <li class="container-right-cont01">每日经济新闻</li>
                    <li class="container-right-cont02">
                        <span>32分钟前 来自 微博 weibo.com</span>
                        <div class="iconfont icon-jiantou9 learn-about">
                            <ul class="learn-more">
                                <li class="editor">编辑</li>
                                <li class="remove">删除</li>
                                <li>收藏</li>
                                <li>投诉</li>
                                <li>赋值微博地址</li>
                            </ul>
                        </div>
                    </li>
                    <li class="container-right-cont03 article">
                        每经16点丨佳能中国推出笑脸识别门禁：愁眉苦脸不开门】作为应对新冠疫情的对策，佳能中国公司20日发布了在进入办公室和会议室之际，认证员工“笑脸”的IT系统，该系统还能同时测体温。佳能希望，该系统有助于在容易因疫情变得阴暗的公司内创造良好氛围。员工和访客需面向设在前台等处的
                    </li>
                </ul>
            </div>
            <!-- 点击编辑按钮之后的部分 -->
            <div class="editor-text">
                <h2>修改博文</h2>
                <textarea class="editor-area" cols="30" rows="10"></textarea>
                <button class="save">保存</button>
                <button class="close">关闭</button>
            </div>
        </li>
    </ul>







    <script src="./Jquery/jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
            // 1、p标签中插入了ul>li 导致了鼠标经过无法正常显示learn-more列表，p主要用来放文本内容，属于失误
            // 2、插入内容时，少加了一个$()符，导致了获取不到输入的文本内容

            $("#compile-text").on("input", function () {
                var fontNum = $(this).val().length
                $(".font-num").text(fontNum)
            })
            // 点击发布输入文本内容 拼接字符串
            $(".send").click(function () {
                var currContainer = `
            <li class="list">
                <div class="container">
                    <div class="container-left">
                        <img src="./img/icon.jpg" alt="">
                    </div>
                    <ul class="container-right">
                        <li class="container-right-cont01">每日经济新闻</li>
                        <li class="container-right-cont02">
                            <span>32分钟前 来自 微博 weibo.com</span>
                            <div class="iconfont icon-jiantou9 learn-about">
                            <ul class="learn-more">
                                <li class="editor">编辑</li>
                                <li class="remove">删除</li>
                                <li>收藏</li>
                                <li>投诉</li>
                                <li>赋值微博地址</li>
                            </ul>
                            </div>
                        </li>
                        <li class="container-right-cont03 article">
                            ${$("textarea").val()}
                        </li>
                    </ul>
                </div>
                <div class="editor-text">
                    <h2>修改博文</h2>
                    <textarea class="editor-area" cols="30" rows="10"></textarea>
                    <button class="save">保存</button>
                    <button class="close">关闭</button>
                </div>
            </li>
                   `
                // console.log(currContainer);
                // $(".article").text(font)
                // console.log(font);
                $(".container-list").append(currContainer)

                // 用来标识第几个
                // $.each($(".container-list>li"), function (index, ele) {
                //     $(this).attr("index", index)
                //     // console.log();
                // })

                // 编辑
                // 点击打开
                $(".editor").click(function () {
                    // console.log($(this).parents(".list").attr("index"));

                    var article = $(this).parents(".list").find(".article").text()
                    console.log(article);

                    $(".editor-text").fadeIn()

                    $(".editor-area").text(article)

                    var currArticle = ""





                    // 保存按钮
                    $(".save").click(function () {
                        $(this).parents(".list").find(".article").text($(this).prev().val())

                        $(".editor-text").slideUp()
                    })

                })

                // $(".article").text(newArticle)
                // $(".editor-text").fadeOut()


                $(".close").click(function () {
                    $(".editor-text").slideUp()
                })


                // 删除按钮
                $(".remove").click(function () {
                    $(this).parents(".list").remove()
                })
            })




        })

    </script>
</body>

</html>